<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
        <top></top>
        <div class="hei10"></div>



        <div class="team">
          <div class="powertop">
            <router-link class="powertopli " to="/order_productionzdsc">自动生产订单</router-link>
            <router-link class="powertopli powertopact" to="/order_productionzdsc/tidanbaobiao">提单报表</router-link>
          </div>
        </div>

				<!-- 搜素 -->
        <div style="padding: 30px 30px 0;">
          <div class="kflexc">
            <div class="ali" :class="act == 1? 'aliact' : ''" @click="changeact(1)">今日</div>
            <div class="ali" :class="act == 2? 'aliact' : ''" @click="changeact(2)">昨日</div>
            <div class="ali" :class="act == 3? 'aliact' : ''" @click="changeact(3)">最近一周</div>
            <el-date-picker style="width: 470px;"  v-model="timems"  @change="timechange" value-format="yyyy-MM-dd HH:mm:ss"  type="datetimerange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>

          <div class="kflexc" style="line-height: 38px; color: color: rgb(51, 51, 51); padding: 0 25px; margin-top: 30px; background: rgb(246, 246, 246); border-radius: 5px; font-size: 14px;">
            <div style="flex: 3;">接口渠道</div>
            <div style="flex: 1;">提单数</div>
            <div style="flex: 1;">提单次数</div>
            <div style="flex: 1;">提单成功数</div>
            <div style="flex: 1;">提单异常数</div>
            <div style="flex: 1;">生产成功数</div>
            <div style="flex: 1;">生产失败数</div>
            <div style="flex: 1;">限额提单数</div>
            <div style="flex: 1;">操作</div>
          </div>

          <div v-for="(item,index) in list" :key="item" style="font-size: 14px;">
            <div class="kflexc" style="line-height: 50px; padding: 0 25px; border-bottom: 1px rgb(215, 215, 215) solid;">
              <div style="flex: 3;">{{item.c_name}}</div>
              <div style="flex: 1;">{{item.order_amount}}</div>
              <div style="flex: 1;">{{item.submit_amount}}</div>
              <div style="flex: 1;">{{item.order_suc_amount}}</div>
              <div style="flex: 1;">{{item.order_err_amount}}</div>
              <div style="flex: 1;">{{item.produce_suc_amount}}</div>
              <div style="flex: 1;">{{item.produce_err_amount}}</div>
              <div style="flex: 1;">{{item.daily_max_order}} <i class="el-icon-edit" style="color: rgb(0, 100, 255);" @click="tiaozheng2(item)"></i></div>
              <div style="flex: 1; color: rgb(0, 100, 255); cursor: pointer;" @click="zhanshichulai(index)">
                展开详情
                <i class="el-icon-arrow-up" v-if="item.show"></i>
                <i class="el-icon-arrow-down" v-if="!item.show"></i>
              </div>
            </div>
            <div v-if="item.show" style="padding:20px;">
              <div class="kflexc" style="background: rgb(250, 250, 250); line-height: 50px;  border-bottom: 1px rgb(215, 215, 215) solid; color: rgb(131, 131, 131);" v-for="item2 in list2" :key="item2.product_id">
                <div style="flex: 274px; padding-left: 20px;">{{item2.product_name}}</div>
                <div style="flex: 1;">{{item2.order_amount}}</div>
                <div style="flex: 1;">{{item2.submit_amount}}</div>
                <div style="flex: 1;">{{item2.order_suc_amount}}</div>
                <div style="flex: 1;">{{item2.order_err_amount}}</div>
                <div style="flex: 1;">{{item2.produce_suc_amount}}</div>
                <div style="flex: 1;">{{item2.produce_err_amount}}</div>
                <div style="flex: 1;">{{item2.daily_max_order}} <i class="el-icon-edit" style="color: rgb(0, 100, 255);"  @click="tiaozheng(item2)"></i></div>
                <div style="flex: 1;">&nbsp;</div>
              </div>
            </div>

          </div>
          <div class="kflexc" style="line-height: 50px; padding: 0 25px; border-bottom: 1px rgb(215, 215, 215) solid;">
            <div style="flex: 3;">合计</div>
            <div style="flex: 1;">{{heji.order_amount}}</div>
            <div style="flex: 1;">{{heji.submit_amount}}</div>
            <div style="flex: 1;">{{heji.order_suc_amount}}</div>
            <div style="flex: 1;">{{heji.order_err_amount}}</div>
            <div style="flex: 1;">{{heji.produce_suc_amount}}</div>
            <div style="flex: 1;">{{heji.produce_err_amount}}</div>
            <div style="flex: 1;">{{heji.daily_max_order}}</div>
            <div style="flex: 1;" >
             &nbsp;
            </div>
          </div>
        </div>
        <!-- <el-table :data="list" border style="width: 100%; margin: 20px 0;">
          <el-table-column align='center' prop='source_id' label="接口渠道"></el-table-column>
          <el-table-column align='center' prop='source' label="提单数"></el-table-column>
          <el-table-column align='center' prop='fanli_mobile' label="提单次数"></el-table-column>
          <el-table-column align='center' prop='page_name' label="提单成功数"></el-table-column>
          <el-table-column align='center' prop='fanli_money' label="提单异常数"></el-table-column>
          <el-table-column align='center' prop='created_at' label="生产成功数"></el-table-column>
          <el-table-column align='center' prop='active_at' label="生产失败数"></el-table-column>
          <el-table-column align='center' prop='dangyue_status_name' label="限额提单数"></el-table-column>
          <el-table-column align='center' label="操作" width="200px">
            <template slot-scope="scope">

            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination> -->
      </div>
    </div>
	</div>
</template>

<script>


import top from "@/components/top.vue";
import left from "@/components/left.vue";
import axios from "axios";
import moment from 'moment'

export default {
	components: {
		left: left,
		top: top
	},
	name:'tidanbaobiao',
	data() {
		return {
      act:1,
      timems:[],
      list:[],
      all:{
        end:"",
        start:"",
        page:1,
        page_size:20
      },
      total:0,
      heji:{
        order_amount:0,
        submit_amount:0,
        order_suc_amount:0,
        order_err_amount:0,
        produce_suc_amount:0,
        produce_err_amount:0,
        daily_max_order:0
      }
		};
	},
	created() {
    this.all.start = moment().format("YYYY-MM-DD 00:00:00");
    this.all.end = moment().format("YYYY-MM-DD HH:mm:ss");


    this.getlist()
	},
	methods: {
    tiaozheng:function(item){
      this.$prompt('请输入限额提单数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        axios.post('/api/plan-market/upstream/product/update',{product_id:item.product_id,daily_max_order:value})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('设置成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      })
    },
    tiaozheng2:function(item){
      this.$prompt('请输入限额提单数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        axios.post('/api/plan-market/upstream/channel/update',{channel_id:item.channel_id,daily_max_order:value})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('设置成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      })
    },
    changeact:function(val){
      if(val == 1){
        this.act = 1
        // let kaishi = moment().subtract(30, "days").format("YYYY-MM-DD hh:mm:ss");
        this.all.start = moment().format("YYYY-MM-DD 00:00:00");
        this.all.end = moment().format("YYYY-MM-DD HH:mm:ss");
        this.all.page = 1
        this.getlist()
      }
      if(val == 2){
        this.act = 2
        this.all.start = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
        this.all.end = moment().format("YYYY-MM-DD HH:mm:ss");
        this.all.page = 1
        this.getlist()
      }
      if(val == 3){
        this.act = 3
        this.all.start = moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00");
        this.all.end = moment().format("YYYY-MM-DD HH:mm:ss");
        this.all.page = 1
        this.getlist()
      }
    },
    zhanshichulai:function(index){

      if(this.list[index].show){
        this.$set(this.list[index],'show',false)
        return
      }

      this.list.forEach(item=>{
        this.$set(item,'show',false)
      })
      axios.get('/api/plan-market/upstream/product/order/count',{params:{
        channel_id:this.list[index].channel_id,
        start:this.all.start,
        end:this.all.end
      }})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list2 = response.data.data
            this.$set(this.list[index],'show',!this.list[index].show)
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    timechange:function(){
      if(this.timems != null){
      	this.all.start = this.timems[0]
      	this.all.end = this.timems[1]
      	this.all.page = 1
      	this.getlist()
      }else{
        this.all.start = ""
        this.all.end = ""
        this.all.page = 1
        this.getlist()
      }

    },
    search: function() {
      this.all.page = 1
      this.getlist()
    },
    //翻页
    fanye: function(page) {
      this.all.page = page
      this.getlist()
    },
    //获取列表
    getlist: function() {
      axios.get('/api/plan-market/upstream/order/count',{params:this.all})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data
            this.heji = {
              order_amount:0,
              submit_amount:0,
              order_suc_amount:0,
              order_err_amount:0,
              produce_suc_amount:0,
              produce_err_amount:0,
              daily_max_order:0
            }
            this.list.forEach(item=>{
              this.heji.order_amount = (parseInt(item.order_amount) || 0)  + this.heji.order_amount
              this.heji.submit_amount =  (parseInt(item.submit_amount) || 0) + this.heji.submit_amount
              this.heji.order_suc_amount =  (parseInt(item.order_suc_amount) || 0) + this.heji.order_suc_amount
              this.heji.order_err_amount =  (parseInt(item.order_err_amount) || 0) + this.heji.order_err_amount
              this.heji.produce_suc_amount =  (parseInt(item.produce_suc_amount) || 0) + this.heji.produce_suc_amount
              this.heji.produce_err_amount =  (parseInt(item.produce_err_amount) || 0) + this.heji.produce_err_amount
              this.heji.daily_max_order =  (parseInt(item.daily_max_order) || 0) + this.heji.daily_max_order
              this.$set(item,'show',false)
            })


          } else {
            this.$message.error(response.data.msg.info);
          }
        })
    },

	}

};
</script>
<style scoped lang="scss">
  .ali{ background: #F3F5F8; line-height: 20px; padding: 8px 20px; border-radius:18px; margin-right: 20px; cursor: pointer;}
  .aliact{ background: #2974FF !important; color: #fff !important; }
  .powertop {
  	display: flex;
  	background:#f9f9f9;
  }
  .powertopli {
  	flex-basis: 180px;
  	line-height: 50px;
  	border-bottom: 3px #F9F9F9 solid;
  	color: #727272;
  	border-right: 1px #F9F9F9 solid;
  	font-size: 16px;
  	text-align: center;
  }
  // .router-link-active {
  // 	background: #FFFFFF;
  // 	border-bottom: 3px #2974FF solid;
  // }
  .powertopact{
    background: #FFFFFF;
    border-bottom: 3px #2974FF solid;
  }
  .team {
  	background: #F9F9F9;
  }
      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }
      /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
      /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
      /deep/ .el-button{ padding: 11px 23px !important;}
       input[type=checkbox] {
              cursor: pointer;
              position: relative;
          }

          input[type=checkbox]::after {
              position: absolute;
              top: 0;
              background-color: #fff;
              color: #fff;
              width: 14px;
              height: 14px;
              display: inline-block;
              visibility: visible;
              padding-left: 0px;
              text-align: center;
              content: ' ';
              border-radius: 2px;
              box-sizing: border-box;
              border: 1px solid #ddd;
          }

          input[type=checkbox]:checked::after {
              content: "";
              background-color: #2974FF;
              border-color: #2974FF;
              background-color: #2974FF;
          }

          input[type=checkbox]:checked::before {
              content: '';
              position: absolute;
              top: 1px;
              left: 5px;
              width: 3px;
              height: 8px;
              border: solid white;
              border-width: 0 2px 2px 0;
              transform: rotate(45deg);
              z-index: 1;
          }

</style>

